vue项目中vscode安装eslint插件和错误自动修复（vue

您所在的位置：网站首页 › vscode 安装vue插件 › vue项目中vscode安装eslint插件和错误自动修复（vue

vue项目中vscode安装eslint插件和错误自动修复（vue

2023-09-19 09:57| 来源: 网络整理| 查看: 265

vue项目中vscode安装eslint插件和错误自动修复（vue-cli2.0创建的项目）

一、这是使用vue cli2.0搭建的项目的配置方法 npm install -g vue-cli vue init webpack my-pro （一路按着”enter“就行）

1、查看自己的vue项目中是否有eslint组件（1）是否有eslintrc.js该文件；（2）查看webpack的配置文件：package.json中是否有以下配置在这里插入图片描述 2.在visual studio code 中安装 eslint 插件和 vetur 插件 3.以上实现的是手动代码修复，如果到后期就不方便，以下是设置自动修复代码的操作：

打开：文件》首选项》设置》搜索 ”eslint“ 》点击用户设置，即如下图标：

在这里插入图片描述将这里的”false“改为”true“，就可以正常编写代码了，ctr+s就自动将代码修复好了（如果不行，就重启一下visual studio code）如果里面没有代码，只有{}，则添加：根目录下面创建一个文件.prettierrc.json （双引号变单引号，去掉分号）

{ "singleQuote": true, "semi": false } { "editor.wordWrap": "on", "workbench.colorTheme": "Quiet Light", "eslint.autoFixOnSave": true, "explorer.confirmDragAndDrop": false, "editor.detectIndentation": false, "editor.tabSize": 2, "vetur.format.defaultFormatter.js": "none", "files.associations": { "*.vue": "vue" }, "eslint.options": { "extensions": [ ".js", ".vue" ] }, "eslint.validate": [ "javascript", { "language": "vue", "autoFix": true }, "html", "vue" ], "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/dist": true }, "emmet.syntaxProfiles": { "javascript": "jsx", "vue": "html", "vue-html": "html" }, "git.confirmSync": false, "window.zoomLevel": 0, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'", "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "editor.codeLens": true, "editor.snippetSuggestions": "top", "[vue]": { "editor.defaultFormatter": "qiang014.vetur-e" }, "[jsonc]": { "editor.defaultFormatter": "vscode.json-language-features" }, }

二、vue-cli3.0创建的项目，改配置

{ "workbench.startupEditor": "newUntitledFile", "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", "editor.multiCursorModifier": "ctrlCmd", "editor.snippetSuggestions": "top", "editor.formatOnPaste": true, "extensions.ignoreRecommendations": false, "editor.fontSize": 15, "editor.tabSize": 2, "vetur.validation.template": false, "workbench.activityBar.visible": true, "workbench.colorTheme": "Eclipse", "javascript.implicitProjectConfig.experimentalDecorators": true, "[vue]": {}, "svn.enableProposedApi": "product", "files.associations": { "*.vue": "vue" }, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ], "terminal.integrated.rendererType": "dom" }

【本文地址】

vue项目中vscode安装eslint插件和错误自动修复（vue

vue项目中vscode安装eslint插件和错误自动修复（vue

今日新闻

推荐新闻